<!DOCTYPE html>
<html lang="zh" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- layui样式文件 -->
    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.min.css">
    <!-- layui脚本文件 -->
    <script src="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/reset.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <title>用户登录主页面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/user.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <script>
        layui.use('element', function(){
            var element = layui.element;
        });
    </script>
    <script>
        window.onload=function () {
            $.ajax({
                url:"/querySort",
                type:"post",
                dataType:"json",
                success:function (data) {
                    for(let i=0;i<data.length;i++){
                        let str="tx"+(i+1)+"-1";
                        console.log(str);
                        document.getElementById(str).innerText=data[i];
                    }
                }
            })
        }
    </script>
    <script type="text/javascript">
        window.onload=function () {
            $.ajax({
                url:"/username",
                type:"post",
                dataType:"json",
                success:function (data) {
                    console.log(data);
                }
            })
        }
    </script>
    <style type="text/css">
        div.search{
            height: 40px;
             width: 500px;
        }
        div.search form{
            width: 100%;
            height: 100%;
        }
        div.search form input:nth-child(2){
            width: 400px;
            height: 100%;
            font-size: 16px;
            text-indent: 40px;
            border: none;
            float: left;
        }
        div.search form input:nth-child(3){
            width: 100px;
            height: 100%;
            font-size: 16px;
            letter-spacing: 5px;
            border: none;
        }
        div.search form img{
            position: absolute;
            left: 250px;
            transform: translateX(-250px);
            margin-top: 10px;
            margin-left: 10px;
            height: 20px;
        }
        a{
            cursor: pointer;
        }
        a:hover{
            color: rgb(255,102,51);
        }
        .main{
            width: 1100px;
            height: 445px;
            margin: 0 auto;
            display: flex;
        }
        .main2{
            width: 1100px;
            height: 240px;
            border: 1px solid #d9d9d9;
            margin: 0 auto;
        }
        .liebiao{
            width: 260px;
            height: 442px;
            border: 1px solid lightskyblue;
        }
        .liebiao>a{
            display: inline-block;
            width: 210px;
            height: 47px;
            background: url("../static/image/sort.jpg");
            background-size: cover;
            color: white;
            font-size: 18px;
            font-weight: bold;
            line-height: 47px;
            padding-left: 50px;
        }
        .fenlei{
            background-color: rgb(241,246,254);
            height: 395px;
        }
        .tets4 .yuer{
            height: 50px;
            padding-top: 6px;
            position: relative;
        }
        .yuer1{
            height: 25px;
        }
        .yuer > div h4{
            background: url("../static/image/sort_list.png") no-repeat 5px 2px;
            padding-left: 20px;
        }
        .yuer > div h4 a{
            color: rgb(34,114,189);
            font-weight: bold;
        }
        .yuer > div h3{
            padding-left: 15px;
        }
        .detail{
            width: 480px;
            height: 100px;
            border: 1px solid rgb(255,102,51);
            position: absolute;
            top: -1px;
            left: 259px;
            background-color: rgb(241,246,254);
            display: none;
            z-index: 999;
        }
        .white{
            display: none;
            width: 3px;
            position: absolute;
            height: 56px;
            background-color: rgb(241,246,254);
            top: -0.1px;
            left: 259px;
            z-index: 999;
        }
        .yuer:hover .white{
            display: block;
        }
        .yuer:hover .detail{
            display: block;
        }
        .yuer:hover{
            border-top: 1px solid rgb(255,102,51);
            border-bottom: 1px solid rgb(255,102,51);
            border-right: 1px solid rgb(241,246,254);
        }
        .yuer:hover .a{
            color: rgb(252,132,19);
            font-weight: bold;
        }
        .txt1{
            padding-top: 15px;
            padding-left: 15px;
            color: rgb(34,114,189);
            font-weight: bold;
        }
        .txt2{
            width: 460px;
            height: 50px;
            margin-left: 15px;
            margin-top: 8px;
            {#border:1px solid black;#}
        }
        .lunbo{
            height: 445px;
            width: 840px;
            border: 1px solid black;
        }
        .layui-tab{
            margin: 0;
        }
        .layui-tab-item{
            height: 180px;
        }
        .wenxue1{
            display: inline-block;
            width: 147px;
            height: 180px;
            background-color: white;
        }
        .wenxue1:hover{
            border: 1px solid red;
        }
        .wimg{
            height: 110px;
            width: 90px;
            margin-left: 28px;
            padding-top: 5px;
        }
        .bookname{
            margin-left: 15px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .author{
            margin-left: 15px;
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 4px;
            margin-bottom: 4px;
        }
        .price{
            font-weight: bold;
            color: red;
            margin-left: 15px;
        }
        .test1{
            vertical-align: middle;
        }
        .test1>div{
            border: 1px solid red;
        }
        .test1 .wenxue1{
            margin: 0 calc((100% - 147px * 6)/6/2);
        }
        .tets6{
            background: url('../static/image/mod-product-promotion-list-bg.png');
            display:inline-block;
            width: 130px;
            height: 180px;
            vertical-align: top
        }
    </style>
</head>
<body>
<div id="container">
    <div id="header">
        <div class="logo"><img src="{{ url_for('static',filename='image/book.png') }}"><span>彩阳书店</span></div>
        <div class="search">
            <form action="#" method="">
                <img src="{{ url_for('static',filename='image/搜索.png') }}" alt="">
                <input type="text" id="searchBox1" name="condition" placeholder="请输入搜索书名">
                <input type="button" id="searchs" value="搜索">
            </form>
        </div>
        <div class="header-right">
            <ul style="background-color: rgb(179,190,245)!important;" class="layui-nav" lay-filter="">
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for('product.soucang') }}">收藏</a></li>
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for('product.showOrder') }}">订单</a></li>
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for("product.cart") }}">购物车</a></li>
                <li class="layui-nav-item">
                    <div style="display: flex">
                        <img src="../static/image/头像/头像.png" style="width: 35px;height: 35px;margin-top: 15px;margin-right: 5px;border-radius: 50%">
                        <a style="font-size: 14px;color: black;padding: 0" href="javascript:;">管理</a>
                    </div>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="{{ url_for("person.changePass") }}">修改密码</a></dd>
                        <dd><a href="{{ url_for("person.userInfo") }}">个人资料</a></dd>
                        <dd><a href="{{ url_for("person.showAdd") }}">收货管理</a></dd>
                        <dd><a href="{{ url_for("person.logout") }}">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="liebiao">
        <a>全部分类图书</a>
        <div class="fenlei">
            <ul class="tets4">
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">育儿</a></h4></div>
                    <div class="yuer1"><h3><a>绘本</a>&nbsp;|&nbsp;<a>国学启蒙</a>&nbsp;|&nbsp;<a>幼小衔接入学</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>幼儿启蒙</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>趣味童书</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>中外名著</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>智力开发</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>注音读物</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>点读书</a>&nbsp;&nbsp;&nbsp;&nbsp;<br>
                            <a>少儿科普</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>少儿童书</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>童话故事</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>兴趣培养</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>幼小衔接入学</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">文学</a></h4></div>
                    <div class="yuer1"><h3><a>外国文学</a>&nbsp;|&nbsp;<a>民间故事</a>&nbsp;|&nbsp;<a>情感</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>名家作品</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>世界文学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>中国近代文学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>民间故事</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>文学理论</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>民间文学</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>经典国学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>青春文学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>纪实文学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>诗歌词曲</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>散文随笔</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">科幻</a></h4></div>
                    <div class="yuer1"><h3><a>星际冒险</a>&nbsp;|&nbsp;<a>时空穿越</a>&nbsp;|&nbsp;<a>外星生命</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>星际冒险</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>时空穿越</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>战争与军事</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>人工智能</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>生物工程</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>未来社会</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>外星生命</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>灾难题材</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>硬科幻</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>进化论</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>空间探险</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">历史</a></h4></div>
                    <div class="yuer1"><h3><a>中国史</a>&nbsp;|&nbsp;<a>史家名著</a>&nbsp;|&nbsp;<a>人物传记</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>中国史</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>世界史</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>地方史志</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>普及读物</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>历史研究与评论</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>史家名著</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>文物考古</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>人物传记</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>四大名著</a>
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">计算机</a></h4></div>
                    <div class="yuer1"><h3><a>程序设计</a>&nbsp;|&nbsp;<a>办公软件</a>&nbsp;|&nbsp;<a>人工智能</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>计算机理论</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>程序设计</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>软件工程</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>计算机安全</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>硬件维护</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>办公软件</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>人工智能</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>信息系统</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>考试认证</a>
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">社科经管</a></h4></div>
                    <div class="yuer1"><h3><a>管理学</a>&nbsp;|&nbsp;<a>马列主义</a>&nbsp;|&nbsp;<a>社科总论</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>管理学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>人力资源</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>职业经理</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>质量管理</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>马列主义</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>中国军事</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>新闻传播</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>社科总论</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>公共关系</a>
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
                <li class="yuer">
                    <div class="yuer1"><h4><a class="a">生活艺术</a></h4></div>
                    <div class="yuer1"><h3><a>成功学</a>&nbsp;|&nbsp;<a>旅游地图</a>&nbsp;|&nbsp;<a>生活方式</a></h3></div>
                    <div class="detail">
                        <div class="txt1">分类</div>
                        <div class="txt2">
                            <a>成功学</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>亲子家教</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>两性关系</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>生活方式</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                            <a>旅游</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>旅游地图</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>烹饪</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>综合</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>设计</a>
                            <a>烹饪</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>美术</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a>书法</a>
                        </div>
                    </div>
                    <div class="white"></div>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-carousel" id="test10">
        <div carousel-item="">
            <div><img style="width: 842px;height: 445px" src="../static/image/1.png"></div>
            <div><img style="width: 842px;height: 445px" src="../static/image/2.png"></div>
            <div><img style="width: 842px;height: 445px" src="../static/image/3.png"></div>
            <div><img style="width: 842px;height: 445px" src="../static/image/4.png"></div>
        </div>
    </div>
</div>
<div class="main2">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">文学</li>
            <li>科幻</li>
            <li>历史</li>
            <li>计算机</li>
        </ul>
        <div class="layui-tab-content">
            <div class="test1 layui-tab-item layui-show">
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/飘.png"></div>
                    <div class="bookname">飘</div>
                    <div class="author">玛格丽特.米切尔 著</div>
                    <div class="price">￥35.5</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/围城.png"></div>
                    <div class="bookname">围城</div>
                    <div class="author">钱钟书 著</div>
                    <div class="price">￥25</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/资治通鉴.png"></div>
                    <div class="bookname">资治通鉴</div>
                    <div class="author">司马光 著</div>
                    <div class="price">￥100</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/水浒传.png"></div>
                    <div class="bookname">水浒传</div>
                    <div class="author">施耐庵 著</div>
                    <div class="price">￥40</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/白鹿原.png"></div>
                    <div class="bookname">白鹿原</div>
                    <div class="author">陈忠实 著</div>
                    <div class="price">￥29.9</div>
                </span>
                <span class="tets6">
                    <img src="../static/image/go.png" style="margin-top: 60px;margin-left: 17px" id="wenxues">
                </span>
            </div>
            <div class="test1 layui-tab-item">
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/三体.png"></div>
                    <div class="bookname">三体</div>
                    <div class="author">刘慈欣 著</div>
                    <div class="price">￥69.9</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/银河帝国.png"></div>
                    <div class="bookname">银河帝国</div>
                    <div class="author">艾萨克.阿西莫夫 著</div>
                    <div class="price">￥160</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/海底两万里.png"></div>
                    <div class="bookname">海底两万里</div>
                    <div class="author">凡尔纳 著</div>
                    <div class="price">￥16</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/安德的影子.png"></div>
                    <div class="bookname">安德的影子</div>
                    <div class="author">奥森·斯科特·卡特 著</div>
                    <div class="price">￥39.9</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/通向宇宙之门.png"></div>
                    <div class="bookname">通向宇宙之门</div>
                    <div class="author">弗雷德里克·波尔 著</div>
                    <div class="price">￥32</div>
                </span>
                <span class="tets6">
                    <img src="../static/image/go.png" style="margin-top: 60px;margin-left: 17px" id="kehuans">
                </span>
            </div>
            <div class="test1 layui-tab-item">
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/雍正皇帝.png"></div>
                    <div class="bookname">雍正皇帝</div>
                    <div class="author">二月河 著</div>
                    <div class="price">￥69.9</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/康熙大帝.png"></div>
                    <div class="bookname">康熙大帝</div>
                    <div class="author">二月河 著</div>
                    <div class="price">￥69.9</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/长安的荔枝.png"></div>
                    <div class="bookname">长安的荔枝</div>
                    <div class="author">马伯庸 著</div>
                    <div class="price">￥50</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/明朝那些事儿.png"></div>
                    <div class="bookname">明朝那些事儿</div>
                    <div class="author">当年明月 著</div>
                    <div class="price">￥48</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/大秦帝国.png"></div>
                    <div class="bookname">大秦帝国</div>
                    <div class="author">由瓦尔.赫拉利 著</div>
                    <div class="price">￥99.9</div>
                </span>
                <span class="tets6">
                    <img src="../static/image/go.png" style="margin-top: 60px;margin-left: 17px" id="lishis">
                </span>
            </div>
            <div class="test1 layui-tab-item">
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/JavaScript高级设计.png"></div>
                    <div class="bookname">JavaScript高级设计</div>
                    <div class="author">马特·弗里斯比 著</div>
                    <div class="price">￥35.5</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/计算机网络.png"></div>
                    <div class="bookname">计算机网络</div>
                    <div class="author">谢希仁 著</div>
                    <div class="price">￥25</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/秒懂设计模式.png"></div>
                    <div class="bookname">秒懂设计模式</div>
                    <div class="author">刘韬 著</div>
                    <div class="price">￥20</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/SQL进阶教程.png"></div>
                    <div class="bookname">SQL进阶教程</div>
                    <div class="author">MICK 著</div>
                    <div class="price">￥40</div>
                </span>
                <span class="wenxue1">
                    <div class="wimg"><img style="width: 90px;height: 110px" src="../static/image/detail/爱上单片机.png"></div>
                    <div class="bookname">爱上单片机</div>
                    <div class="author">杜洋 著</div>
                    <div class="price">￥29.9</div>
                </span>
                <span class="tets6">
                    <img src="../static/image/go.png" style="margin-top: 60px;margin-left: 17px" id="jisuanji">
                </span>
            </div>
        </div>
    </div>
</div>
<script>
    window.onload=function () {
        //跳转到不同图书分类页面
        document.getElementById("wenxues").onclick=function () {
            window.location.href="{{ url_for('index.wenxue') }}"
        }
        document.getElementById("kehuans").onclick=function (){
            window.location.href="{{ url_for('index.kehuan') }}"
        }
        document.getElementById("lishis").onclick=function (){
            window.location.href="{{ url_for('index.lishi') }}"
        }
        document.getElementById("jisuanji").onclick=function (){
            window.location.href="{{ url_for('index.zhuanye') }}"
        }
    }
</script>
<script>
    layui.use(['element','carousel', 'form'], function(){
        var element = layui.element;
        var carousel = layui.carousel
            ,form = layui.form;

        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '842px'
            ,height: '445px'
            ,interval: 2000
        });
    })
</script>
<!--搜索框-->
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
        //点击搜索按钮进行搜索
        document.getElementById("searchs").onclick=function () {
            let zhi=document.getElementById("searchBox1").value;
            if(!zhi){
                layer.alert("请输入搜索内容！",{icon:2,anim:6});
            }else {
                /**
                 * ajax请求  地址 /product/search/book  参数  书名关键字
                 */
                $.ajax({
                    url:"/product/search/book",
                    type: "get",
                    data: {"bookname":zhi},
                    success:function (json) {
                        if(json.list.length!=0){
                            //跳转到
                            var url="{{ url_for('product.search') }}?bookname="+zhi;
                            location.href=url;
                        }else {
                            layer.alert("没有搜到你想要的书籍！",{icon:2,anim:6});
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>